<template>
  <div>
    <!-- 门店管理 -->

    <!-- 面包屑导航 -->
    <Crumbs></Crumbs>
    <!-- 组件切换 -->
    <div class="store_list">
      <button @click="storeListBtn1">门店列表</button>
      <button @click="storeListBtn2" class="storeListBtn">添加门店</button>
    </div>

    <div class="storeAddList">
      <div class="box">
        <el-form label-width="100px">
          <el-form-item label="门店名称">
            <el-input style="width: 60%" v-model="storename"></el-input>
          </el-form-item>

          <!-- 添加图片 -->
          <el-form-item label="门店照片">
            <el-upload class="avatar-uploader" action="http://127.0.0.1:7001/api/Xloadimg" :on-success="handleAvatarSuccess">
              <img style="width: 200px" v-if="storeimg" :src="storeimg" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <!-- 三级联动 -->
          <el-form-item label="省市区">
            <el-select v-model="province" placeholder="请选择省" style="width: 30%">
              <el-option v-for="item in Area" :key="item.value" :label="item.label" :value="item"> </el-option>
            </el-select>
            <el-select v-model="city" placeholder="请选择市" style="width: 30%">
              <el-option v-for="item in cityQuery" :key="item.value" :label="item.label" :value="item"> </el-option>
            </el-select>
            <el-select v-model="area" placeholder="请选择区" style="width: 30%">
              <el-option v-for="item in areaQuery" :key="item.value" :label="item.label" :value="item"> </el-option>
            </el-select>
          </el-form-item>

          <!-- 经纬度 -->
          <el-form-item label="门店经纬度"> </el-form-item>

          <el-form-item label="门店地址">
            <el-input style="width: 60%" v-model="position"></el-input>
          </el-form-item>

          <el-form-item label="门店电话">
            <el-input style="width: 60%" v-model="phone"></el-input>
          </el-form-item>

          <el-form-item label="营业时间">
            <el-time-picker style="width: 60%" is-range v-model="value1" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"> </el-time-picker>
          </el-form-item>

          <el-form-item label="门店支持">
            <el-radio-group v-model="resource">
              <el-radio label="支持自提"></el-radio>
              <el-radio label="支持外卖"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="联系人信息">
            <!-- <el-form-item>姓名</el-form-item> -->
            <el-input style="width: 60%" v-model="operator"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">确定</el-button>
            <el-button @click="cancelBtn">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getXaddstoreAdmin, getXstoreAdmin } from '../../../api/index'
import Crumbs from '../Crumbs.vue'

export default {
  data() {
    return {
      storename: '',
      storeimg: '',
      position: '',
      phone: '',
      operator: '',
      //三级联动
      Area: [],
      cityQuery: [],
      areaQuery: [],
      province: '',
      city: '',
      area: '',
      dialogVisible: false,
      resource: '',
      //时间
      value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
    }
  },
  created() {
    this.Area = require('../../../api/city/city.js').city
    console.log('this.Area', this.Area)
    this.province = this.Area[0]
  },
  methods: {
    storeListBtn1() {
      this.$router.push('/storeAdmin')
    },
    storeListBtn2() {
      this.$router.push('/addStore')
    },
    // 图片上传
    handleAvatarSuccess(res, file) {
      console.log(res, file)
      this.storeimg = `http://127.0.0.1:7001${res.data}`
      console.log(this.storeimg)
    },
    //确定
    onSubmit() {
      const obj = {
        storename: this.storename,
        storeimg: this.storeimg,
        position: this.position,
        phone: this.phone,
        operator: this.operator,
      }
      // console.log(obj);
      if (this.storename == '' || this.position == '' || this.phone == '' || this.operator == '') {
        this.$alert('信息不可为空', '提示', {
          confirmButtonText: '确定',
          callback: (action) => {
            this.$message({
              type: 'info',
              message: `action: ${action}`,
            })
          },
        })
      } else {
        getXaddstoreAdmin(obj).then((res) => {
          console.log(res)
        })
        this.$router.push('/storeAdmin')
        getXstoreAdmin().then((res) => {
          this.tableData = res.data
        })
      }
    },
    //取消
    cancelBtn() {
      this.$router.push('/storeAdmin')
    },
  },
  watch: {
    // 监听省级
    province: function (newValue) {
      ;(this.cityQuery = []), (this.areaQuery = []), (this.shi = ''), (this.qu = '')
      this.Area.forEach((item) => {
        if (newValue.label === item.label) {
          this.cityQuery = item.children
          this.city = this.cityQuery[0]
          // console.log('city', this.cityQuery)
        }
      })
    },
    // 监听市级
    city: function (newValue) {
      ;(this.areaQuery = []), (this.area = '')
      this.cityQuery.forEach((item) => {
        if (newValue.label === item.label) {
          this.areaQuery = item.children
          this.area = this.areaQuery[0]
          // console.log('area', this.areaQuery)
        }
      })
    },
  },
  components: { Crumbs },
}
</script>

<style lang="scss" scoped>
.store_list {
  width: 1200px;
  margin: 0 auto;
  button {
    width: 100px;
    height: 30px;
    border: none;
    margin: 10px 30px 30px 0px;
    border-radius: 10px;
  }
  .storeListBtn {
    background: rgb(220, 183, 63);
    color: white;
  }
}
.storeAddList {
  width: 1100px;
  margin: auto;
  .box {
    width: 600px;
    margin-top: 20px;
  }
}
</style>
